<template>
  <div>
    <div class="picker-wrapper">
      <img :src="item.url" v-for="(item,index) in selectedImage" :key="item.url"
           @click="imageClickHandler(arguments[0],index)"/>
      <div class="add-btn" @click="$refs['image-input'].click()"></div>
      <input type="file" accept="image/*;" ref="image-input" hidden @change="imageInputHandler">
    </div>
  </div>
</template>
<script>
  import store from '../store/store'
  export default {
    data() {
      return {
      }
    },
    props: {
    },
    computed:{
      selectedImage: ()=>store.state.imageToUpload
    },
    methods: {
      imageInputHandler(e) {
        let files = Array.from(e.target.files)
        files.forEach(file => {
          store.commit('addImageToUpload',file)
        })
      },
      imageClickHandler(e, index) {
        this.$router.push({name: 'reportCourseFeedbackImageDetail', query: {url: this.selectedImage[index].url}})
      }
    }
  }
</script>
<style scoped>
  .picker-wrapper {
    display: flex;
    flex-wrap: wrap;
  }

  .add-btn, img {
    width: 80px;
    height: 80px;
    margin: 5px;
    flex-grow: 0;
    flex-shrink: 0;
  }

  img {
    object-fit: cover;
  }

  .add-btn {
    box-sizing: border-box;
    border: 1px solid #999;
    position: relative;
  }

  .add-btn:before {
    content: '';
    position: absolute;
    width: 50%;
    height: 2px;
    background-color: #999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .add-btn:after {
    content: '';
    position: absolute;
    width: 2px;
    height: 50%;
    background-color: #999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
